<template>
	<view>
		<u-navbar :is-back="false" title="" class="flex-j-sb-ac">
			<view class="mg-lr-25" @click="backHome">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="top-slot-wrap">
				<u-input v-model="fbTypeValue" :type="type" :border="border" @click="show = true"
					placeholder="选择发布的类型" />
				<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
			</view>
			<view class="mg-lr-25">
				<text @click="save">上传</text>
			</view>
		</u-navbar>
		<view class="">
			<u-field type="textarea" v-model="uploadTitle" label-width="0" :clearable="false" border-bottom auto-height
				placeholder="请输入标题"></u-field>
			<!-- <u-field v-model="uploadTitle" label-width="0" :clearable="false" border-bottom auto-height
				placeholder="景点称号"></u-field> -->
		</view>
		<!--  ref="uUpload" -->
		<view class="">
			<u-upload :action="action" @on-error="updatEerror" @on-success="updateSuccess" @on-remove="removeSuccess"></u-upload>
		</view>
		<view class="editor_toolbox">
			<i class="iconfont icon-undo" data-method="undo" @tap="edit" />
			<i class="iconfont icon-redo" data-method="redo" @tap="edit" />
			<i class="iconfont icon-img" data-method="insertImg" @tap="edit" />
			<i class="iconfont icon-video" data-method="insertVideo" @tap="edit" />
			<i class="iconfont icon-link" data-method="insertLink" @tap="edit" />
			<i class="iconfont icon-text" data-method="insertText" @tap="edit" />
			<i class="iconfont icon-clear" @tap="clear" />
			<i class="iconfont icon-save" @tap="save" />
		</view>
		<view style="padding-bottom: 50px;">
			<mp-html ref="article" container-style="padding:20px" :content="content"
				domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" :editable="editable" />
		</view>
		<block v-if="modal">
			<view class="mask" />
			<view class="modal">
				<view class="modal_title">{{modal.title}}</view>
				<input class="modal_input" :value="modal.value" maxlength="-1" auto-focus @input="modalInput" />
				<view class="modal_foot">
					<view class="modal_button" @tap="modalCancel">取消</view>
					<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)"
						@tap="modalConfirm">确定</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	const content = require('./content')
	export default {
		data() {
			return {
				uploadTitle: "",
				content,
				swiperList: "",
				picture: "",
				touristRating: "",
				modal: null,
				editable: true,
				value: '',
				fbTypeValue: "",
				fbTypeId: "",
				type: 'select',
				show: false,
				border: true,
				actionSheetList: [{
						text: '热点资讯发布',
						uploadId: 1
					},
					{
						text: '旅游发布',
						uploadId: 2
					},
					{
						text: '文化发布',
						uploadId: 3
					},
					{
						text: '产业发布',
						uploadId: 4
					}
				],
				upErrorMessage: "发布的标题必填",
				action: 'http://47.109.31.62:18080/rural-revitalization/sys/common/upload',
				fileList: []
			}
		},
		components: {
			mpHtml
		},
		onReady() {
			/**
			 * @description 设置获取链接的方法
			 * @param {String} type 链接的类型（img/video/audio/link）
			 * @param {String} value 修改链接时，这里会传入旧值
			 * @returns {Promise} 返回线上地址（type为音视频时可以返回一个数组作为源地址）
			 */
			this.$refs.article.getSrc = (type, value) => {
				return new Promise((resolve, reject) => {
					if (type == 'img') {
						uni.showActionSheet({
							itemList: ['本地选取', '远程链接'],
							success: res => {
								// 本地选取
								if (res.tapIndex == 0)
									uni.chooseImage({
										count: 1,
										success: res => {
											/* 实际使用时，这里需要上传到服务器后返回
											uni.showLoading({
												title: '上传中'
											})
											uni.uploadFile({
												url: 'xxx', // 接口地址
												filePath: res.tempFilePaths[0],
												name: 'xxx',
												success(res) {
													resolve(res.data.path) // 返回线上地址
												},
												fail: reject,
												complete: uni.hideLoading
											})*/
											resolve(res.tempFilePaths[0])
										},
										fail: reject
									})
								// 远程链接
								else {
									this.callback = {
										resolve,
										reject
									}
									this.$set(this, 'modal', {
										title: '图片链接',
										value
									})
								}
							}
						})
					} else {
						this.callback = {
							resolve,
							reject
						}
						let title
						if (type == 'video')
							title = '视频链接'
						else if (type == 'audio')
							title = '音频链接'
						else if (type == 'link')
							title = '链接地址'
						this.$set(this, 'modal', {
							title,
							value
						})
					}
				})
			}
		},
		methods: {
			updateSuccess(data, index, lists, name){
				this.fileList.push(data.message)
			},
			removeSuccess(index, lists, name){
				this.fileList.splice(index,1)
			},
			updatEerror(){
				uni.showToast({
					title: "图片上传失败"
				})
			},
			// 返回
			backHome() {
				uni.reLaunch({
					url: "/pages/home/index/index"
				})
			},
			// 旅游发布
			async _initSendTravel() {
				let Travel = await this.$myRequest({
					url: '/rural-revitalization/rtc/travelDetails/add',
					method: "POST",
					data: {
						content: this.content, // 内容
						swiper: this.swiperList,
						title: this.uploadTitle,
						"picture": this.fileList.join(","),
						touristRating: this.touristRating,
						"areaNumber": 0,
						"createBy": "",
						"createTime": "",
						"delFlag": 0,
						"englishTitle": "",
						"id": "",
						"isAudit": 0,
						"isPublish": 0,
						"music": "",
						"sysOrgCode": "",
						"updateBy": "",
						"updateTime": ""

					}
				})
				// console.log(Travel)
				if (Travel.code == 200) {
					uni.showToast({
						title: "旅游上传成功"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home/index/index"
						})
					}, 500)
				} else {
					console.log(index)
				}
			},
			// 新闻资讯发布
			async _initSendNews() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/rtc/hotspotInformation/add',
					method: "POST",
					data: {
						"title":  this.uploadTitle,
						"content": this.content,
						"titlePic": this.fileList.join(","),
						"createBy": "",
						"createTime": "",
						"delFlag": 0,
						"id": "",
						"source": "",
						"sysOrgCode": "",
						"updateBy": "",
					}
				})
				console.log(news)
				if (news.code == 200) {
					uni.showToast({
						title: news.result
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home/index/index"
						})
					}, 500)
				} else {
					console.log(index)
				}
			},
			// 文化发布
			async _initSendCulture() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/rtc/culturalDetails/add',
					method: "POST",
					data: {
						"area": "",
						  "content": this.content,
						  "createBy": "",
						  "createTime": "",
						  "culturalType": 0,
						  "delFlag": 0,
						  "detailedAddress": "",
						  "id": "",
						  "isAudit": 0,
						  "isPublish": 0,
						  "latitude": 0,
						  "longitude": 0,
						  "picture": this.fileList.join(","),
						  "sysOrgCode": "",
						  "title": this.uploadTitle,
						  "updateBy": "",
						  "updateTime": "",
						  "videoContent": ""
					}
				})
				// console.log(news)
				if (news.code == 200) {
					uni.showToast({
						title: news.result
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home/index/index"
						})
					}, 500)
				} else {
					console.log(news)
				}
			},
			// 产业发布
			async _initSendIndustry() {
				let Industry = await this.$myRequest({
					url: '/rural-revitalization/rtc/industryDetails/add',
					method: "POST",
					data:{
						"areaCode": 0,
						  "content": this.content,
						  "createBy": "",
						  "createTime": "",
						  "delFlag": 0,
						  "id": "",
						  "isAudit": 0,
						  "isPublish": 0,
						  "picture": this.fileList.join(","),
						  "sysOrgCode": "",
						  "title": this.uploadTitle,
						  "updateBy": "",
						  "updateTime": ""
					}
				})
				console.log(Industry)
			if (Industry.code == 200) {
				uni.showToast({
					title: Industry.result
				})
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/home/index/index"
					})
				}, 500)
			} else {
				console.log(index)
			}
			},

			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.fbTypeValue = this.actionSheetList[index].text;
				this.fbTypeId = this.actionSheetList[index].uploadId;
			},

			// 处理模态框
			modalInput(e) {
				this.value = e.detail.value
			},
			modalConfirm() {
				this.callback.resolve(this.value || this.modal.value || '')
				this.$set(this, 'modal', null)
			},
			modalCancel() {
				this.callback.reject()
				this.$set(this, 'modal', null)
			},
			// 调用编辑器接口
			edit(e) {
				this.$refs.article[e.currentTarget.dataset.method]()
			},
			// 清空编辑器内容
			clear() {
				uni.showModal({
					title: '确认',
					content: '确定清空内容吗？',
					success: res => {
						if (res.confirm)
							this.$refs.article.clear()
					}
				})
			},
			// 保存编辑器内容
			save() {
				var content = this.$refs.article.getContent()
				uni.showModal({
					title: '保存',
					// content,
					confirmText: '完成',
					success: res => {
						if (res.confirm) {
							// 复制到剪贴板
							// uni.setClipboardData({
							// 	data: content,
							// })
							if(this.fbTypeId == 1){
								this._initSendNews();
							}else if(this.fbTypeId == 2){
								this._initSendTravel();
							}else if(this.fbTypeId == 3){
								this._initSendCulture();
							}else if(this.fbTypeId == 4){
								this._initSendIndustry();
							}
							// let files = [];
							// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
							// files = this.$refs.uUpload.lists.filter(val => {
							// 	return val.progress == 100;
							// })
							// // // 如果您不需要进行太多的处理，直接如下即可
							// // // files = this.$refs.uUpload.lists;
							// console.log(files)
							// // console.log(content)
							// 结束编辑
							this.editable = false
						}
					}
				})
			}
		}
	}
</script>

<style>
	.top-slot-wrap {
		flex: 1;
	}

	.editor_toolbox {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background-color: #EDEDED;
		display: flex;
		padding: 5px;
		box-sizing: border-box;
		line-height: 1.9;
	}

	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		flex: 1;
		text-align: center;
		font-family: "iconfont" !important;
		font-size: 22px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-undo:before {
		content: "\e607";
	}

	.icon-redo:before {
		content: "\e606";
	}

	.icon-img:before {
		content: "\e6e2";
	}

	.icon-video:before {
		content: "\e798";
	}

	.icon-link:before {
		content: "\e60d";
	}

	.icon-text:before {
		content: "\e6ce";
	}

	.icon-clear:before {
		content: "\e637";
	}

	.icon-save:before {
		content: "\e501";
	}

	/* 模态框 */
	.modal {
		position: fixed;
		top: 50%;
		left: 16px;
		right: 16px;
		background-color: #fff;
		border-radius: 12px;
		transform: translateY(-50%);
	}

	.modal_title {
		padding: 32px 24px 16px;
		font-size: 17px;
		font-weight: 700;
		text-align: center;
	}

	.modal_input {
		display: block;
		padding: 5px;
		margin: 0 24px 32px 24px;
		font-size: 14px;
		border: 1px solid #dfe2e5;
	}

	.modal_foot {
		display: flex;
		line-height: 56px;
		font-weight: 700;
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	.modal_button {
		flex: 1;
		text-align: center;
	}

	/* 蒙版 */
	.mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: black;
		opacity: 0.5;
	}
</style>
